<template>
<el-row :gutter="!rowstyle ? 10 : 0">
  <el-col :span="!rowstyle ? 8 : 24" :class="{'mb10': rowstyle}">
    <el-select
      placeholder="请选择省"
      :clearable="clearable"
      :disabled="disabled"
      v-model="prov">
      <el-option
        v-for="(item, index) in arr"
        :key="index"
        :label="item.name"
        :value="item.name">
      </el-option>
    </el-select>
  </el-col>
  <el-col :span="!rowstyle ? 8 : 24" :class="{'mb10': rowstyle}">
    <el-select
      placeholder="请选择市"
      no-data-text="请先选择省"
      :clearable="clearable"
      :disabled="disabled"
      v-model="city">
      <el-option
        v-for="(item, index) in cityArr"
        :key="index"
        :label="item.name"
        :value="item.name">
      </el-option>
    </el-select>
  </el-col>
  <el-col :span="!rowstyle ? 8 : 24">
    <el-select
      placeholder="请选择区县"
      no-data-text="请先选择市"
      :clearable="clearable"
      :disabled="disabled"
      v-model="district">
      <el-option
        v-for="(item, index) in districtArr"
        :key="index"
        :label="item.name"
        :value="item.name">
      </el-option>
    </el-select>
  </el-col>
</el-row>
</template>

<script>
import { areaJson } from './data';
let valBack = {
  'prov': null,
  'city': null,
  'district': null
};

export default {
  name: 'DgAreaPicker',
  model: {
    event: 'change'
  },
  // {rowstyle:整行显示; clearable: 清空; disabled: 禁用; defaultData: 默认值}
  props: ['rowstyle', 'clearable', 'disabled', 'defaultData'],
  data () {
    return {
      valBack, // 当前组件选中值
      arr: areaJson,
      prov: null,
      city: null,
      district: null,
      cityArr: [],
      districtArr: []
    };
  },
  watch: {
    defaultData: function (newVal) {
      this.selectVal(newVal);
    },
    disabledVal: function (newVal) {
      this.onlyShowVal = newVal;
    },
    prov: function () {
      this.valBack = { // 储存省选中值
        'prov': this.prov,
        'city': null,
        'district': null
      };
      this.$emit('change', this.valBack);
      this.updateCity();
    },
    city: function () {
      this.valBack = { // 储存市选中值
        'prov': this.prov,
        'city': this.city,
        'district': null
      };
      this.$emit('change', this.valBack);
      this.updateDistrict();
    },
    district: function () {
      this.valBack = { // 储存区县选中值
        'prov': this.prov,
        'city': this.city,
        'district': this.district
      };
      this.$emit('change', this.valBack);
    }
  },
  mounted: function () {
    this.selectVal(this.defaultData);
  },
  methods: {
    /*
      * @date 2018-11-29
      * @author wolfMan
      * @description {默认值选中}
      * @param {} index: 序列号
      * @returns {boolean} 无
    */
    selectVal (areaShow) {
      if (areaShow) {
        this.prov = areaShow.prov;
        this.city = areaShow.city;
        this.district = areaShow.district;
      } else {
        this.prov = null;
      };
    },
    /*
      * @date 2018-11-29
      * @author wolfMan
      * @description {获取城市}
      * @param {} index: 序列号
      * @returns {} 无
    */
    updateCity: function () {
      if (!this.prov) {
        this.cityArr = [];
        this.city = null;
        return;
      };
      let _empty = true; // 是否清空输入框
      for (let i in this.arr) {
        let obj = this.arr[i];
        if (obj.name === this.prov) {
          this.cityArr = obj.sub;
          break;
        };
      };
      // 若当前选择的“市”不在选择项中，则清空选项框
      this.cityArr.forEach((element) => {
        if (element.name === this.city) {
          _empty = false;
        };
      });
      if (this.cityArr.length > 0 && _empty) {
        this.city = null; // 省选择值改变时，清空 市 的值
      };
    },
    /*
      * @date 2018-11-29
      * @author wolfMan
      * @description {获取城区县}
      * @param {} index: 序列号
      * @returns {boolean} 无
    */
    updateDistrict: function () {
      if (!this.city) {
        this.districtArr = [];
        this.district = null;
        return;
      };
      let _empty = true; // 是否清空输入框
      for (let i in this.cityArr) {
        let obj = this.cityArr[i];
        if (obj.name === this.city) {
          this.districtArr = obj.sub;
          break;
        };
      };
      // 若当前选择的“区县”不在选择项中，则清空选项框
      this.districtArr.forEach((element) => {
        if (element.name === this.district) {
          _empty = false;
        };
      });
      if (this.districtArr.length > 0 && _empty) {
        this.district = null; // 市选择值改变时，清空 区县 的值
      };
    }
  }
};
</script>